<template>
  <div class="hero">
    <p class="title HYChengXingJ">我的Heros</p>
    <scroll-view :scroll-y="true" :style="{'height': '400px'}" :scroll-with-animation="true" @scrolltolower="scrolltolower" @scroll='test'>
      <ul class="hero-box">
        <li v-for="items of heroList" v-bind:key="items.key" @click="toStrategy(items.key,items.imgsrc,items.name)">
          <img :src="items.imgsrc" alt="">
          <span>{{items.name}}</span>
        </li>
      </ul>
      <div class="load" :class="{hide:showinfor}">{{infor}}</div>
    </scroll-view>
  </div>
</template>
<script>
import card from '@/components/card'
import '@/assert/lib/Tween.js'
import Tool from '@/assert/lib/tool.js'
export default {
  data() {
    return {
      key: '',
      infor: '正在加载',
      showinfor: 1,
      hero: '',
      hero_index: 30,//显示的英雄个数
    }
  },
  computed: {
    heroList() {
      return this.hero;
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(wx.getStorageSync('key'));
      if (!wx.getStorageSync('key')) {
        this.initHero();
      } else {
        this.hero = wx.getStorageSync('key').slice(0, this.hero_index);
      }
    })
  },
  methods: {
    init() {
      console.log(this.$root.$mp.query);
    },
    //跳转到详情页
    toStrategy(name, imgUrl, chinaName) {
      console.log(name);
      let url = `../details/main?name=${name}&chinaName=${chinaName}`;
      wx.setStorageSync('heroSingle', { img: imgUrl })
      wx.navigateTo({ url })
    },
    //获取英雄列表
    initHero() {
      var vm = this;
      wx.request({
        url: `${Tool.host()}` + `hero/lol.json`, //仅为示例，并非真实的接口地址
        data: {
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {
          console.log(res.data)
          wx.setStorageSync('hero', res.data)
          vm.hero = res.data.slice(0, vm.hero_index);
        }
      })
    },
    //英雄下拉加载
    scrolltolower() {
      console.log(wx.getStorageSync('hero'));
      if (wx.getStorageSync('hero')) {
        console.log(this.hero_index, wx.getStorageSync('hero').length);
        if (this.hero_index < wx.getStorageSync('hero').length) {
          this.hero_index += 30;
          this.hero = wx.getStorageSync('hero').slice(0, this.hero_index + 30);
        } else {
          this.showinfor = 0;
          this.hero_index = wx.getStorageSync('hero').length;
          this.hero = wx.getStorageSync('hero').slice(0, this.hero_index);
        }
      } else {
      }
    }
  }
}
</script>
<style lang="less" scoped>
.HYChengXingJ {
  font-family: "HYChengXingJ";
}
.hero {
  .hide {
    display: none;
  }
  .title {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    color: #000;
    font-weight: bold;
  }
  .hero-box {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      align-self: center;
      width: 80px;
      height: 80px;
      padding: 5px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      img {
        align-self: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      span {
        padding-top: 5px;
        align-self: center;
        font-size: 10px;
      }
    }
  }
  .load {
    font-size: 12px;
    text-align: center;
  }
}
</style>
